<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="./script/rem.js"></script>
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/base.js"></script>
  <script type="text/javascript" src="./script/doT.min.js"></script>
</head>

<body>

  <header class="goods-head" style="padding-top:0.4rem;">
    <div class="goods-head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
    <h3>商品详情</h3>
    <div class="goods-head-r"></div>
  </header>

  <div id="aui-slide">
    <div class="aui-slide-wrap">
      <div class="aui-slide-node bg-dark">
        <img src="./image/l1.png" />
      </div>
      <div class="aui-slide-node bg-dark">
        <img src="./image/l2.png" />
      </div>
      <div class="aui-slide-node bg-dark">
        <img src="./image/l3.png" />
      </div>
    </div>
    <div class="aui-slide-page-wrap">
      <!--分页容器-->
    </div>
    <div class="aui-slide-num"></div>
  </div>

  <script type="text/template" id="templateImage">
    <div class="aui-slide-wrap">
      {{~it:value:index}}
      <div class="aui-slide-node bg-dark">
        <img src="{{=value}}" />

      </div>
      {{~}}
    </div>
    <div class="aui-slide-page-wrap">
      <!--分页容器-->
    </div>
  </script>


  <div id='list'>
    <dl class="goods-1">
      <dt>毛孔脏东西浮出来·麦卢卡蜂蜜排毒清洁面膜 70g</dt>
      <dd>￥166.00<del>￥200.00</del></dd>
      <p>重量：70g<span>已售{{=}}件</span></p>
    </dl>
    <ul class="goods-2 mb20">
      <h3>产品参数</h3>
      <li>商品名称<span>麦卢卡蜂蜜排毒清洁面膜</span></li>
      <li>重量<span>70g</span></li>
      <li>品牌<span>Swisse</span></li>
      <li>是否为特殊用途化妆品<span>否</span></li>
      <li>产地<span>澳大利亚</span></li>
    </ul>
    <div class="goods-3">
      <div class="goods-3-t">产品详情</div>
      <img src="image/goods-details.jpg">
    </div>

    <div class="cart-d-t"></div>
    <div class="goods-d">
      <span>加入购物车</span>
      <span onclick="goods_details_on()">立即购买</span>
    </div>
  </div>



<!--     <div class="shop-cart-bg">
        <div class="goods-box">
            <div class="goods-box-t">选择数量<i class="fa fa-close" onclick="goods_details_off()"></i></div>
            <div class="goods-box-m">
                <div class="shop-num">
                    <i class="jian"></i>
                    <input type="text" value="3">
                    <i class="jia"></i>
                </div>
            </div>
            <div class="goods-box-btn" tapmode onclick="shop_order_details()">确定</div>
        </div>
      </div> -->


      <script type="text/template" id="template">

        <div class="shop-cart-bg">
          <div class="goods-box">
            <div class="goods-box-t">选择数量<i class="fa fa-close" onclick="goods_details_off()"></i></div>
            <div class="goods-box-m">
              <div class="shop-num">
                <i class="jian" onclick="change_count('jian')"></i>
                <!-- <input type="text" value="1" id='count' readonly="readonly"> -->
                <input type="number" value="1" id='count'>
                <i class="jia" onclick="change_count('jia')"></i>
              </div>
            </div>
            <!-- <div class="goods-box-btn" tapmode onclick="goods_details_on({{=it.data.id}})">确定</div> -->
          </div>
        </div> 

        <dl class="goods-1">
          <dt>{{=it.data.title}}</dt>
          <dd>￥{{=it.data.price_current}}<del>￥{{=it.data.price}}</del></dd>
          <p>
            <span>已售{{=it.data.number_sales}}件</span></p>
          </dl>
          <!-- {{=it.data.html_desc}} -->
        <!-- <ul class="goods-2 mb20">
          <h3>{{=it.data.html_desc}}</h3>
          <li>商品名称<span>麦卢卡蜂蜜排毒清洁面膜</span></li>
          <li>重量<span>70g</span></li>
          <li>品牌<span>Swisse</span></li>
          <li>是否为特殊用途化妆品<span>否</span></li>
          <li>产地<span>澳大利亚</span></li>
        </ul> -->
        <div class="goods-3">
            <!-- <div class="goods-3-t">产品详情</div>
            <img src="image/goods-details.jpg"> -->
            {{=it.data.html_standard}}

          </div>

          <div class="cart-d-t"></div>
          <div class="goods-d">
            <!-- <span onclick="add_cart({{=it.data.id}})">加入购物车</span> -->
            <span style="width:100%;" onclick="goods_details_on({{=it.data.id}})">立即购买</span>
          </div>
        </script>




      </body>
      <script type="text/javascript" src="./script/api.js"></script>
      <script type="text/javascript" src="./script/index.js"></script>
      <script type="text/javascript" src="./script/aui-slide.js"></script>
      <script type="text/javascript">
        apiready = function() {
          token = $api.getStorage('token');
          token = 'Bearer ' + token;
          getData();

        }

        function getData() {

          var id = api.pageParam.id;

          var data_url = webAddress + '/api/product/vip';
          api.ajax({
            url: data_url,
            method: 'get',
            data: {

            },
            headers: {
              Authorization: token,
              Accept: 'application/json',
            },
          }, function(ret, err) {
            if (ret) {
                // console.log( JSON.stringify( ret ) );
                var template = $api.byId('template');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret);
                var list = $api.byId('list');
                $api.html(list, html);


                var template = $api.byId('templateImage');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret.data.slides);
                var list = $api.byId('aui-slide');
                $api.html(list, html);

                var slide = new auiSlide({
                  container: document.getElementById("aui-slide"),
                    //"width":300, //宽度
                    "height": 240, //高度
                    "speed": 500, //速度
                    "autoPlay": 3000, //自动播放
                    "loop": true, //是否循环
                    "pageShow": true, //是否显示分页器
                    "pageStyle": 'dot', //分页器样式，分dot,line
                    'dotPosition': 'center', //当分页器样式为dot时控制分页器位置，left,center,right
                    currentPage: currentFun
                  })

                $('img').css('width','100%');
                $('img').css('height','auto');

              } else {
                // alert(JSON.stringify(err));
              }
            });




        }





        function shop_order_details() {
          api.openWin({
            name: 'shop_order_details',
            url: './shop_order_details.html',
          });
        }

        function closeWin() {
          api.closeWin({});
        }
    // var slide = new auiSlide({
    //     container: document.getElementById("aui-slide"),
    //     // "width":300,
    //     "height": 260,
    //     "speed": 300,
    //     "pageShow": true,
    //     "autoPlay": 3000, //自动播放
    //     "pageStyle": 'dot',
    //     "loop": true,
    //     'dotPosition': 'center',
    //     currentPage: currentFun
    // })

    function currentFun(index) {
        // console.log(index);
      }


      function add_cart(index) {
        api.ajax({
          url: webAddress + '/api/cart/add',
          method: 'post',
          headers: {
            'Authorization': token
          },
          data: {
            values: {
              product_id: index,
              number: 1,
              category: 1
            },
          }
        }, function(ret, err) {
          if (ret) {

            api.toast({
              msg: '添加购物车成功!',
              duration: 2000,
              location: 'bottom'
            });

            api.execScript({
              name: 'root',
              frameName: 'shop',
              script: 'get_cart();'
            });


          } else {
                // alert(JSON.stringify(err));
              }
            });

      }


      function goods_details_on(index) {


        api.openWin({
          name: 'shop_order_details',
          url: './shop_order_details.html',
          pageParam: {
            types: 1
          }
        });

        
      // api.ajax({
      //     url: webAddress + '/api/cart/add',
      //     method: 'post',
      //     headers: {
      //         'Authorization': token
      //     },
      //     data: {
      //         values: {
      //             product_id: index,
      //             number: 1,
      //             category: 2
      //         },
      //     }
      // }, function(ret, err) {
      //     if (ret) {
      //       // console.log(JSON.stringify(ret));
      //       // alert(JSON.stringify(ret));
      //       var ids = ret.data.id;
      //       api.openWin({
      //           name: 'shop_order_details',
      //           url: './shop_order_details.html',
      //           pageParam: {
      //               ids: ids,
      //               types: 1
      //           }
      //       });


      //     } else {
      //         alert(JSON.stringify(err));
      //     }
      // });


//       var temp= $(".shop-cart-bg").is(":visible");//是否可见

//       if (temp ==false) {
//         $(".shop-cart-bg").show();
//         $(".goods-box").animate({
//           bottom:"1rem"
//         });
//       }else {

//         api.ajax({
//           url: webAddress + '/api/product/vip',
//           method: 'get',
//           data: {
//           },
//           headers: {
//             Authorization: token,
//             Accept: 'application/json',
//           },
//         }, function(ret, err) {
//           if (ret) {
//             // alert( JSON.stringify( ret ) );
//             // alert(ret.data.number_limit_buy)

//             limit_count = ret.data.number_limit_buy;
//             var count = $('#count').val();
//             if ( count < limit_count ) {
//               api.toast({
//                 msg: '购买数量不能小于'+limit_count,
//                 duration: 2000,
//                 location: 'bottom'
//               });
//             }else{
//               api.openWin({
//                 name: 'shop_order_details',
//                 url: './shop_order_details.html',
//                 pageParam: {
//                   types: 1,
//                   count: count,
//                 }
//               });
//             }
//           } else {
//            // alert(JSON.stringify(err));
//          }
//        });



// }



// api.ajax({
//   url: webAddress + '/api/cart/add',
//   method: 'post',
//   headers: {
//     'Authorization': token
//   },
//   data: {
//     values: {
//       product_id: index,
//       number: count,
//       category: 2
//     },
//   }
// }, function(ret, err) {
//   if (ret) {
//     var ids = ret.data.id;
//     api.openWin({
//       name: 'shop_order_details',
//       url: './shop_order_details.html',
//       pageParam: {
//         ids: ids
//       }
//     });
//   } else {
//     alert(JSON.stringify(err));
//   }
// });


}

    // 更改数量按钮
    function change_count(type) {

      var count = $('#count').val();
      if (type == 'jia') {
        count = parseInt(count) + 1;
        $('#count').val(count);

      } else {
        if (count <= 1) {
          return;
        }
        count = parseInt(count) - 1;
        $('#count').val(count);
      }

    }

  </script>

  </html>
